<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>添加菜单</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
</head>
<body>
  <div class="layui-form" lay-filter="sys-menu-form" id="sys-menu-form"  style="padding: 20px 0 0 0;">
    <div class="layui-form-item">
      <label class="layui-form-label">菜单名称</label>
      <div class="layui-input-inline">
        <input type="text" name="menuName" lay-verify="required" placeholder="请输入菜单名称" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">父级编号</label>
      <div class="layui-input-inline">
        <input id="parentId" name="parentId" value="0" type="hidden">
        <div id="parentName" class="xm-select-demo"></div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">请求地址</label>
      <div class="layui-input-inline">
        <input type="text" name="url" lay-verify="required" placeholder="请输入请求地址" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">菜单类型</label>
      <div class="layui-input-inline">
        <select lay-filter="menuType" name="menuType" id="menuType"></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">菜单状态</label>
      <div class="layui-input-inline" id="visible"></div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">权限标识</label>
      <div class="layui-input-inline">
        <input type="text" name="perms" placeholder="请输入权限标识" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">显示顺序</label>
      <div class="layui-input-inline">
        <input type="text" name="orderNum" lay-verify="required" placeholder="请输入显示顺序" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">选择图标</label>
      <div class="layui-input-inline">
        <input type="text" id="iconPicker" name="icon" lay-filter="iconPicker" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-inline">
        <input type="text" name="remark" placeholder="请输入备注" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item layui-hide">
      <input type="button" lay-submit lay-filter="save-submit" id="save-submit" value="确认">
    </div>
  </div>
  <script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
  <script th:inline="javascript">
  let ctx = [[${#request.getContextPath()}]];
  layui.config({
      base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form','treeSelect','crud','iconPicker'], function(){
    let $ = layui.$,
     treeSelect= layui.treeSelect,
     crud = layui.crud,
     iconPicker = layui.iconPicker,
     form = layui.form;

    form.on('submit(save-submit)', function(data){
        $.ajax({
            type: 'POST',
            url:  ctx + '/sysMenu/add',
            data: JSON.stringify(data.field),
            contentType:'application/json;charset=UTF-8',
            dataType: 'json',
            success: function(result) {
                layer.msg(result.message);
                if (result.code === 200) {
                    let index = parent.layer.getFrameIndex(window.name);
                    // 关闭
                    parent.layer.close(index);
                    // 刷新
                    parent.location.reload();
                }
            }
        });
    });
    treeSelect.render({
      // 选择器
      elem: '#parentName',
      // 数据
      data: ctx + '/sysMenu/treeSelect',
      // 异步加载方式：get/post，默认get
      type: 'get',
      // 占位符
      placeholder: '请输入父级编号',
      // 是否开启搜索功能：true/false，默认false
      search: true,
      // 点击回调
      click: function(d){
        $("#parentId").val(d.current.id);
        $("#parentName").val(d.current.name);
      },
      // 加载完成后的回调函数
      success: function (d) {
        console.log(d);
      }
    });
    crud.setSelect("menuType","menuType",'M');
    crud.setRadio("visible","enabled","Y");

    iconPicker.render({
      // 选择器，推荐使用input
      elem: '#iconPicker',
      // 数据类型：fontClass/unicode，推荐使用fontClass
      type: 'fontClass',
      // 是否开启搜索：true/false
      search: true,
      // 是否开启分页
      page: true,
      // 每页显示数量，默认12
      limit: 12,
      // 点击回调
      click: function (data) {
        $("#iconPicker").val(data.icon);
      }
    });
  });
  </script>
</body>
</html>